<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<div id="div01">
				<div id="div02">测试1</div>
				<div id="div03">测试2</div>
				<div id="div04">测试3</div>
			</div>
			<ul id="ul01">
				<li>香蕉</li>
				<li>西瓜</li>
				<li>葡萄</li>
			</ul>
			
			<div>
				nodeName:<input type="text" id="txtNodeName" /><br />
				nodeType:<input type="text" id="txtNodeType" /><br />
				nodeValue:<input type="text" id="txtNodeValue" /><br />
				childeNodes数量:<input type="text" id="txtQty" /><br />
			</div>
			<button onclick="show(1)">回到根元素</button><br />
			<button onclick="show(2)">得到当前元素的第一个子元素</button><br />
			<button onclick="show(3)">得到当前元素的最后一个子元素</button><br />
			<button onclick="show(4)">得到当前元素的前一个兄弟元素</button><br />
			<button onclick="show(5)">得到当前元素的后一个兄弟元素</button><br />
			<script type="text/javascript">
				var cur;
				function show(op)
				{
					if(op==1)
					{
						cur = document.documentElement;
					}
					else if(op == 2)
					{
						cur = cur.firstChild;
					}
					else if(op == 3)
					{
						cur = cur.lastChild;;
					}
					else if(op == 4)
					{
						cur = cur.previousElementSibling;
					}
					else if(op == 5)
					{
						cur = cur.nextElementSibling;
					}
					txtNodeName.value = cur.nodeName;
					txtNodeType.value = cur.nodeType;
					txtNodeValue.value = cur.nodeValue;
					txtQty.value = cur.childNodes.length;
				}
			</script>
		</body>
</html>
